<!-- 收付款对冲记录 -->
<template>
    <el-dialog
        custom-class="coll-pay-hedged-record"
        v-el-drag-dialog="{ drag: true, full: false, resize: false }"
        :visible="true"
        :close-on-click-modal="false"
        @close="closeMd"
        :title="`收付款对冲记录`"
        width="80%"
        append-to-body>
        <div ref="dgtools" class="filter-container">
            <div class="dgts-row">
                <el-form 
                    :model="dg.ps" 
                    :inline="true" 
                    @keyup.enter.native="getDgList">
                    <el-form-item>
                        <el-date-picker
                            v-model="dg.ps.sedate"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            style="width: 210px"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-select
                            v-model="dg.ps.cusUname"
                            clearable filterable
                            placeholder="单位（用车/供车单位）"
                            remote reserve-keyword
                            :remote-method="queryCusPageList ">
                            <el-option
                                v-for="it in clientList"
                                :key="it.id"
                                :label="it.unitName"
                                :value="it.baseUserId.uname">
                                <span>{{it.unitName}}</span>
                                <span>{{it.baseUserId.realName}}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-button 
                        type="primary" 
                        icon="el-icon-search" 
                        @click="getDgList">
                        搜索
                    </el-button>

                    <el-button 
                        type="primary" 
                        icon="el-icon-check" 
                        @click="cancelHedged">
                        确认撤销
                    </el-button>
                </el-form>
            </div>
        </div>
        
        <el-table
            :ref="dg.tbName"
            :data="dg.list"
            row-key="id"
            :height="bodyHeight - 60"
            border fit 
            :row-class-name="rowClassName"
            @header-dragend="dragHeader"
            @selection-change="selRowChange">
            <el-table-column 
                fixed="left" 
                type="selection" 
                align="center" 
                :resizable="false" 
                width="40">
            </el-table-column>
            <el-table-column 
                v-for="(col, index) in dg.columns" 
                :key="index"
                :class-name="dg.dgName"
                :prop="col.field"
                :label="col.label"
                :width="col.width">
                <template slot-scope="{row}">
                <template v-if="col.field == 'addTime'">
                    <span>{{row.addTime}}</span>
                </template>

                <span v-else-if="col.field == 'operUser'">
                    {{row.operUser.realName}}
                </span>

                <span v-else-if="col.field == 'reimUser'">
                    {{row.reimUser.realName}}
                </span>

                <span v-else-if="col.field == 'currHedgedMoney'">
                    {{row.gathMoney > row.payMoney ? row.payMoney : row.gathMoney}}
                </span>

                <span v-else-if="col.field == 'hedgedDiffMoney'">
                    {{Math.abs(Number(row.gathMoney) - Number(row.payMoney))}}
                </span>

                <span v-else-if="col.field == 'gainTime'">{{row.gainTime.substr(0, 16)}}</span>

                <template v-else-if="col.field == 'remark'">
                    <span v-html="row.remark.replace(/\(/g, '<br />').replace(/\)/g, '；<br />').replace(/&nbsp;,/g, '<br />')"></span>
                </template>
                
                <span v-else-if="col.field == 'operFun'">
                    <el-button type="text" @click.native="setSingleHedgedCollpayListMd({state: true, obj: row})">对冲详情</el-button>
                </span>

                <template v-else>{{ getColVal(row, col.field) }}</template>
                </template>
            </el-table-column>
        </el-table>
        <Pagination 
            :total="dg.total" 
            :page.sync="dg.ps.page" 
            :limit.sync="dg.ps.rows" 
            @pagination="getDgList"
        />

        <SingleHedgedCollpayList
            v-if="singleHedgedCollpayListMd.state"
            :myData="singleHedgedCollpayListMd"
            @myClick="setSingleHedgedCollpayListMd"
        />

    </el-dialog>
</template>

<script>
import DataGridBase from '@/views/mixins/DataGridBase';
import DataGridResize from '@/views/mixins/DataGridResize';
import elDragDialog from '@/directive/el-drag-dialog';
import Pagination from '@/components/Pagination';

import * as commonSer from "@/api/services/common.service";
import * as orderSer from "@/api/services/order.service";

import SingleHedgedCollpayList from '../single-hedged-collpay-list';

export default {
    mixins: [ DataGridBase, DataGridResize],
    directives: { elDragDialog },
    components: { Pagination, SingleHedgedCollpayList },
    props: {myData: Object},
    data() { 
        let cols = [
            { label: "客户单位名称", field: "reimUnitName", width: 150 },
            { label: "客户姓名", field: "reimUser", width: 80 },
            // { label: "往来客户", field: "reimUser", width: 90 },
            { label: "应收金额", field: "gathMoney", width: 90 },
            { label: "应付金额", field: "payMoney", width: 90 },
            { label: "本次对冲金额", field: "currHedgedMoney", width: 90 },
            { label: "对冲后结差", field: "hedgedDiffMoney", width: 90 },
            { label: "操作员", field: "operUser", width: 100 },
            { label: "对冲时间", field: "addTime", width: 140 },
            { label: "对冲编号", field: "operMark", width: 120 },
            { label: "备注", field: "remark", width: 250 },
            { label: "操作", field: "operFun", width: 100 },
        ];
        return {
            // 是否撤销过
            isCancel: false,

            dg: {
                dgName: 'dg',
                tbName: 'collPayHedgedRecordTb',
                total: 0,
                list: [],
                srcCols: cols,
                columns: [],
                selRows: [],
                ps: {
                    page: 1, rows: 100,
                    reimType: 'OFFSET',
                    // 起止日期
                    sedate: [],
                    // 查询客户
                    cusUname: '',
                },
            },

            // 单位-选择列表 
            clientList: [], 
            
            // 记录详情收付款订单列表-弹框
            singleHedgedCollpayListMd: {state: false},

        }
    },
    created() {
        const that = this;

        that.initTbSetData(that.dg.dgName);
        that.getDgList();
    },
    methods:{
        closeMd() {
            // 撤销过，则关闭弹框将刷新父组件列表
            if(this.isCancel) this.$emit('reloadDg');

            this.$emit("myClick", {state: false});
        },
        /**
         * 获取-单位客户-选择列表（用于下拉框）
         * @param find 客户手机号/用户名/姓名
         */
        queryCusPageList(find) {
            commonSer.queryComboCusPageList({find: find}).then((res) => {
                this.clientList = res?.data || [];
            });
        },
        // 获取-表格列表
        getDgList(){
            const that = this, U = that.U, dg = that.dg, ps = U.scopy(dg.ps);
            
            ps.stime = ps.sedate?.length == 2 ? ps.sedate[0] : "";
            ps.etime = ps.sedate?.length == 2 ? ps.sedate[1] : "";
            delete ps.sedate;

            orderSer.findOrderOperationPageList(ps).then(res => {
                let list = res?.data || [];
                for(let i in list){ list[i].dgName = dg.dgName; }
            
                dg.list = list;
                dg.total = res?.count || 0;
            });
        },

        // 撤销对冲
        cancelHedged(){
            const that = this, U = that.U, rows = that.getSeledRows();

            if(rows.length !== 1){
                U.qerror(`${rows.length == 0 ? '请' : '只能'}选择一条数据`);
            }else{
                let row = rows[0];
                U.qconfim(`确认撤销该操作吗？`).then(r => {
                    if(r){
                        orderSer.cancelOffSet({cancelOffSetNum: row.operMark }).then(res => {
                            if(res.code !== 1){
                                U.qerror(res.msg);
                            }else{
                                U.qsuccess(res.msg);

                                // 刷新列表
                                that.getDgList();
                                // 撤销成功
                                that.isCancel = true;
                            }
                        });
                    }
                });
            }
        },
        
        // 显示/隐藏-对冲详情收付款订单列表-弹框
        setSingleHedgedCollpayListMd(e){
            const that = this, md = that.singleHedgedCollpayListMd;

            if(!e.state){
                md.obj = null;
                md.state = false;
            }else{
                md.obj = e.obj;
                md.state = true;
            }
        },

    },
 }
</script>